<template>
	<div class="review-content">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :loading="auditDialog.loading" :submit="(form) => openSeaMoonDialog(true, form)" />
		<div class="head">
			<span class="title">
				{{ $t('funds.fund_audit.bonus_review_detail_title') }}
			</span>
			<div v-if="allowAudit" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					v-if="hasPermission('407036')"
					type="success"
					:disabled="loading"
					@click="() => $refs.auditDialog.successOpen()"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_success_1')
							: $t('funds.fund_audit.audit_success_2')
					}}
				</el-button>
				<el-button
					v-if="hasPermission('407036')"
					type="danger"
					:disabled="loading"
					@click="() => $refs.auditDialog.dangerOpen()"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_fail_1')
							: $t('funds.fund_audit.audit_fail_2')
					}}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<!-- 会员返水详情 -->
		<MemberBouns :detailData="detailData" :isShowAudit="true" />
		<!-- 审核弹窗 -->
		<el-dialog
			:title="$t('funds.fund_audit.audit_dialog_title')"
			center
			:visible.sync="auditDialog.visible"
			width="630px"
			class="audit-dialog"
			@close="closeAuditDialog"
		>
			<el-form
				ref="auditForm"
				:model="auditDialog"
				:rules="formRules"
				label-width="auto"
			>
				<el-form-item :label="$t('common.remark')" prop="remark">
					<el-input
						v-model="auditDialog.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					:disabled="auditDialog.loading"
					@click="auditDialog.visible = false"
				>
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:disabled="auditDialog.loading"
					@click="openSeaMoonDialog(true)"
				>
					<i v-show="auditDialog.loading" class="el-icon-loading"></i>
					<span>{{ $t('common.submit') }}</span>
				</el-button>
			</div>
		</el-dialog>

		<SeaMoonDialog
			:sea-moon-visible.sync="seaMoon.visible"
			:params="seaMoon.params"
			@success="onSeaMoonValidSucceed"
		></SeaMoonDialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import SeaMoonDialog from '@/components/SeaMoon'
// import { getUsername } from '@/utils/auth'
import MemberBouns from '@/components/Funds/MemberBouns'
import AuditConfirm from '@/components/AuditConfirm'

export default {
	components: {
		SeaMoonDialog,
		MemberBouns,
		AuditConfirm
	},
	mixins: [list],
	props: {
		allowAudit: {
			type: Boolean,
			required: true
		},
		activeName: {
			type: String,
			required: true
		},
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			// 审核弹窗
			auditDialog: {
				loading: false,
				visible: false,
				result: undefined,
				remark: undefined
			},
			loading: false,
			seaMoon: {
				isAudit: false,
				visible: false,
				params: {}
			}
		}
	},
	computed: {
		formRules() {
			return {
				remark: [
					{
						required: true,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	created() {},
	methods: {
		onSeaMoonValidSucceed(data) {
			if (this.seaMoon.isAudit) {
				this.handleAudit()
			}
		},
		openSeaMoonDialog(isAudit, form) {
			if (isAudit) {
				this.handleAudit(form)
				this.seaMoon.isAudit = isAudit
			} else {
				this.seaMoon.visible = true
			}
		},
		goBack() {
			this.$emit('goBack')
		},
		openAuditDialog(status) {
			this.auditDialog.result = status
			this.auditDialog.visible = true
		},
		closeAuditDialog() {
			this.$refs.auditForm.resetFields()
		},
		handleAudit(form) {
			this.auditDialog.loading = true
			// const params = {
			// 	ids: [this.detailData.id],
			// 	auditResult: this.auditDialog.result,
			// 	auditDesc: this.auditDialog.remark,
			// 	orderStatus: this.activeName === '1' ? 2 : 4,
			// 	merchantId: this.auditDetailList.merchantId,
			// 	auditOperator: getUsername()
			// }
			const params = {
				ids: [this.detailData.id],
				auditStatus: form.status,
				remark: form.remark
			}
			this.$api
				.memberRebateAuditRecord(params)
				.then((res) => {
					this.$message({
						type: 'success',
						message: this.$t('common.action_success')
					})
					this.auditDialog.visible = false
					this.auditDialog.loading = false
					this.$emit('goBack', true)
				})
				.catch(() => {
					this.auditDialog.loading = false
				})
		},
		labelFilter(val) {
			let name = ''
			this.userLabel.forEach((item) => {
				if (item.labelId === val) {
					name = item.labelName
				}
			})
			return name || '-'
		}
	}
}
</script>

<style lang="scss" scoped>
.review-content {
	color: #666666;
	margin: 24px 16px 20px 16px;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
}

::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
	text-align: left;
}
::v-deep .el-dialog__body {
	padding: 10px 20px;
	.username {
		font-size: 16px;
		color: #1e96f2;
		font-weight: bold;
		margin-bottom: 10px;
	}
}

.audit-dialog ::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
	text-align: center;
}
</style>
